<template>
	<view class="box">
		<view class="status_bar">
			<view class="top_view">
				<text class="iconfont icon-xiazai6" @tap="fanhui()"></text>
				<text>上传头像</text>
				<text @tap="jumpp()">跳过</text>
			</view>
		</view>
		<view class="set">
			<view class="pic">
				<view class="left">
					<view>添加头像</view>
					<view>据我们统计，</view>
					<view>好的照片可以提升666%的匹配成功率。</view>
					<view>上传五官清晰的照片</view>
					<view>才能让更多人了解你</view>
				</view>
				<view class="right" @tap="paizhao()"><image :src="img" mode=""></image></view>
			</view>
			<view class="foot">
				<view class="list">
					<view class="item">
						<image src="../../../static/pho0.jpg" mode=""></image>
						<view>
							<image src="../../../static/pho0.jpg" mode=""></image>
							清晰近照
						</view>
					</view>
					<view class="item">
						<image src="../../../static/pho0.jpg" mode=""></image>
						<view>
							<image src="../../../static/pho0.jpg" mode=""></image>
							非人物照
						</view>
					</view>
					<view class="item">
						<image src="../../../static/pho0.jpg" mode=""></image>
						<view>
							<image src="../../../static/pho0.jpg" mode=""></image>
							模糊照片
						</view>
					</view>
					<view class="item">
						<image src="../../../static/pho0.jpg" mode=""></image>
						<view>
							<image src="../../../static/pho0.jpg" mode=""></image>
							暴露照片
						</view>
					</view>
					<view class="item">
						<image src="../../../static/pho0.jpg" mode=""></image>
						<view>
							<image src="../../../static/pho0.jpg" mode=""></image>
							合拍照片
						</view>
					</view>
				</view>
				<view class="text">上传真是头像，才能匹配成功呦~</view>
				<button type="primary" class="btn" @tap="jump()">完成注册</button>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			img: ''
		};
	},
	methods: {
		fanhui() {
			uni.navigateBack({
				delta: 1
			});
		},
		// 本地选取
		// bendi(){
		// 	console.log(this)
		// 	var that=this
		// 	uni.chooseImage({
		// 	    count: 1,
		// 	    sizeType: ['original', 'compressed'],
		// 	    sourceType: ['album'],
		// 	    success: function(res) {
		// 			console.log(that)
		// 	        // 预览图片
		// 			console.log(res.tempFiles[0].path)
		// 			that.img=res.tempFiles[0].path;
		// 	        // uni.previewImage({
		// 	        //     urls: res.tempFilePaths,
		// 	        //     longPressActions: {
		// 	        //         itemList: ['发送给朋友', '保存图片', '收藏'],
		// 	        //         success: function(data) {
		// 	        //             console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
		// 	        //         },
		// 	        //         fail: function(err) {
		// 	        //             console.log(err.errMsg);
		// 	        //         }
		// 	        //     }
		// 	        // });
		// 	    }
		// 	    });
		// }

		// 拍照选取
		paizhao() {
			var that = this;
			uni.chooseImage({
				count: 6, //默认9
				sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
				sourceType: ['camera'], //从相册选择
				success: function(res) {
					console.log(res.tempFiles[0].path)
					that.img=res.tempFiles[0].path
				}
			});
		}
	}
};
</script>

<style lang="less">
.box {
	// font-family: PingFang SC;
	position: relative;
	width: 100%;
	height: 100%;
	background-color: #1f1e24;
	.status_bar {
		box-sizing: border-box;
		/* // 自定义状态栏高度 */
		height: var(--status-bar-height);
		position: relative;
		height: 88upx;
		// transparent
		background-color: #fff;
		.top_view {
			box-sizing: border-box;
			background-color: #1f1e24;
			height: 88upx;
			padding: 0 30upx;
			// padding-top: calc(25upx + var(--status-bar-height));
			width: 100%;
			position: fixed;
			top: 0;
			z-index: 999;
			display: flex;
			justify-content: space-between;
			align-items: center;
			// font-size: 36upx;
			color: #fff;
			text:nth-child(1) {
				font-size: 37upx;
			}
			text:nth-child(2) {
				font-size: 36upx;
				font-family: PingFang SC;
				font-weight: bold;
				color: rgba(252, 250, 241, 1);
			}
			text:nth-child(3) {
				font-size: 37upx;
				font-size: 30upx;
				font-weight: 500;
				color: rgba(255, 224, 147, 1);
			}
		}
	}
	.pic {
		margin-top: 91upx;
		padding: 0 60upx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		.left {
			flex: 1;
			view {
				font-size: 23upx;
				color: #fcfaf1;
			}
			view:nth-child(1) {
				font-size: 38upx;
				color: rgba(255, 224, 147, 1);
				margin-bottom: 25upx;
			}
		}
		.right {
			width: 145upx;
			height: 145upx;
			border-radius: 50%;
			margin-left: 60upx;
			image {
				width: 145upx;
				height: 145upx;
				border-radius: 50%;
			}
		}
	}
	.foot {
		width: 100%;
		height: 100%;
		margin-top: 402upx;
		.list {
			display: flex;
			justify-content: space-between;
			padding: 0 61rpx;
			.item {
				display: flex;
				flex-direction: column;
				align-items: center;
				image {
					width: 113upx;
					height: 116upx;
				}
				view {
					image {
						width: 19upx;
						height: 19upx;
						margin-right: 6upx;
					}
					font-size: 18upx;
					color: rgba(252, 250, 241, 1);
					margin-top: 26upx;
				}
			}
		}
		.text {
			font-size: 26upx;
			color: rgba(102, 102, 102, 1);
			margin-top: 68upx;
			text-align: center;
		}
		.btn {
			width: 635upx;
			height: 88upx;
			background: rgba(255, 224, 147, 1);
			border-radius: 0;
			color: rgba(31, 30, 36, 1);
			font-size: 32upx;
			line-height: 88upx;
			margin-left: 50%;
			transform: translateX(-50%);
			margin-top: 81upx;
		}
	}
}
</style>
